import 'package:flutter/material.dart';

//Container容器示例

class MyContainerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: '容器组件示例',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('容器组件示例'),
        ),
        body: new Center(
          //添加容器
          child: Container(
            width: 200.0,
            height: 200.0,
            //添加边框装饰效果
            decoration: BoxDecoration(
              color: Colors.white,
              border: new Border.all(color: Colors.grey, width: 8.0),
              borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
            ),
            child: Text(
              'Flutter',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 28.0),
            ),
          ),
        ),
      ),
    );
  }
}

//图片展示demo

class ImageApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'Image demo',
      home: new ImageDemo(),
    );
  }
}

//图片展示
class ImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      //添加网络图片
      child: new Image.network(
        //图片url
        'https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=0f14d81119dfa9ece9235e4503b99c66/f2deb48f8c5494ee0dd8b51425f5e0fe98257ec1.jpg',
        //填充模式
        fit: BoxFit.fitWidth,
      ),
    );
  }
}

//文本展示
class TextApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: '文本展示',
      home: new TextDemo(),
    );
  }
}

class TextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(title: new Text('文本展示demo')),
      body: new Column(
        children: <Widget>[
          new Text(
            '红色+黑色删除线+25号',
            style: new TextStyle(
              color: const Color(0xffff0000),
              decoration: TextDecoration.lineThrough,
              decorationColor: const Color(0xff000000),
              fontSize: 25.0,
            ),
          ),
          new Text(
            '橙色+下划线+24号',
            style: new TextStyle(
              color: const Color(0xffff9900),
              decoration: TextDecoration.underline,
              fontSize: 24.0,
            ),
          ),
          new Text(
            '虚线上划线+23号+倾斜',
            style: new TextStyle(
              decoration: TextDecoration.overline,
              decorationStyle: TextDecorationStyle.dashed,
              fontSize: 23.0,
              fontStyle: FontStyle.italic,
            ),
          ),
          new Text(
            '24号+加粗',
            style: new TextStyle(
              fontSize: 23.0,
              fontStyle: FontStyle.italic,
              fontWeight: FontWeight.bold,
              letterSpacing: 6.0,
            ),
          )
        ],
      ),
    );
  }
}

//图标展示

class IconApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '图标示例',
      home: new IconDemo(),
    );
  }
}

class IconDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Icon 示例'),
      ),
      body: new Icon(
        Icons.phone,
        color: Colors.green[500],
        size: 80.0,
      ),
    );
  }
}

class IconButtonApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'IconButtom  demo',
      home: new IconButtonDemo(),
    );
  }
}

class IconButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('IconButton  demo'),
      ),
      body: new Center(
        child: new IconButton(
            icon: Icon(Icons.volume_up, size: 48.0),
            tooltip: '按下操作',
            onPressed: () {
              print('按下操作');
            }),
      ),
    );
  }
}

//凸起的按钮事件

class RaiseButtonApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'rasie button demo',
      home: new RaiseButtonDemo(),
    );
  }
}

class RaiseButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('rasie button demo'),
      ),
      body: new Center(
        child: new RaisedButton(
          onPressed: () {
            print('raise button  点击事件');
          },
          child: new Text('RaiseButton 组件'),
        ),
      ),
    );
  }
}

//基础列表组件 -ListView  横向展示

class ListViewApp extends StatelessWidget
{
    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final title='基础列表示例';  
    return new MaterialApp(
          title: title,
          home: Scaffold(
                  appBar:AppBar(
                        title: new Text(title),
                  ),
                  //添加基础列表组件
                  body: new ListView(
                        //添加静态数据
                        children: <Widget>[
                              ListTile(
                                  //添加图标
                                  leading: Icon(Icons.alarm),
                                  //添加文本
                                  title: Text('Alarm'),
                              ),
                              ListTile(leading: Icon(Icons.phone),title: new Text('Phone'),),
                              ListTile(leading: Icon(Icons.phone),title: new Text('Phone'),),
                              ListTile(leading: Icon(Icons.phone),title: new Text('Phone'),),
                              ListTile(leading: Icon(Icons.airplay),title: Text('AirPlay'),),
                              ListTile(leading: Icon(Icons.alarm),title: new Text('Alarm'),),
                              ListTile(leading: Icon(Icons.phone),title: new Text('Phone'),),
                        ],
                  ),
          ),
    );
  }
}
//水平列表组件

class ListViewAppHorizontal extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
            title: '水平列表组件',
            home: Scaffold(
                    appBar: AppBar(
                          title: Text('水平列表组件'),
                    ),
                    body: Container(
                            margin: EdgeInsets.symmetric(vertical: 20.0),
                            height: 200.0,
                            child: ListView(
                                    //设置水平方向排列
                                   scrollDirection: Axis.horizontal,
                                   //添加子元素
                                    children: <Widget>[
                                          Container(
                                                width: 160.0,
                                                color: Colors.lightBlue,
                                          ),
                                          Container(
                                                width: 160.0,
                                                color: Colors.amber,
                                          ),
                                          Container(
                                                width: 160.0,
                                                color: Colors.green,
                                                child: Column(
                                                      children: <Widget>[
                                                          Text(
                                                              '水平',
                                                              style: TextStyle(
                                                                      fontWeight: FontWeight.bold,
                                                                      fontSize: 36.0,
                                                              ),
                                                          ),
                                                          Text(
                                                              '列表',
                                                              style: TextStyle(
                                                                  fontWeight: FontWeight.bold,
                                                                  fontSize: 36.0,
                                                              ),
                                                          ),
                                                          Icon(Icons.list),
                                                      ],
                                                ),
                                          ),
                                        Container(
                                              width: 160.0,
                                              color: Colors.deepPurpleAccent,
                                        ),
                                        Container(
                                            width: 160.0,
                                            color: Colors.pinkAccent,
                                        )
                                    ],
                            ),
                    ),
            ),
    );
  }
}

class ListViewItemsAppWrapper extends StatelessWidget
{
      @override
  Widget build(BuildContext context) {
    // TODO: implement build
        final items = new List<String>.generate(500, (i)=>"item $i");
    return ListViewItemsApp(items: items,);
  }
}
//长列表组件
class ListViewItemsApp extends StatelessWidget
{
  //列表数据集
    final List<String> items;

    ListViewItemsApp({Key key,@required this.items}):super(key: key);

      @override
  Widget build(BuildContext context) {
    // TODO: implement build
        final title ='长列表组件';

    return MaterialApp(
            title: title,
            home: Scaffold(
                      appBar: AppBar(
                            title: Text(title),
                      ),
                      //使用ListView.builder 来构造列表项
                      body:new ListView.builder(
                          //列表长度
                          itemCount: items.length,
                          //列表项构造器
                          itemBuilder: (context,index)
                          {
                                    return new ListTile(
                                        leading:Icon(Icons.airplay) ,
                                         title: Text('${items[index]}'),
                                    );
                          }),
            ),

    );
  }
}

//网格列表组件

class GridViewApp extends StatelessWidget
{
      @override
  Widget build(BuildContext context) {
          final title='网格列表组件';
    return MaterialApp(
              title: title,
              home: new Scaffold(
                      appBar: AppBar(
                            title: Text(title),
                      ),
                      //使用gridview.count 创建gridview
                      body: GridView.count(
                                primary: false,
                                //四周增加一定的空隙
                                padding: const  EdgeInsets.all(20.0),
                                crossAxisSpacing: 30.0,
                                //一行放三列数据
                                crossAxisCount: 3,
                                //数据项 5行3列
                                children: <Widget>[
                                        const Text('第一行第一列'),
                                        const Text('第一行第二列'),
                                        const Text('第一行第三列'),
                                        const Text('第二行第一列'),
                                        const Text('第二行第二列'),
                                        const Text('第二行第三列'),
                                        const Text('第三行第一列'),
                                        const Text('第三行第二列'),
                                        const Text('第三行第三列'),
                                        const Text('第二行第一列'),
                                        const Text('第二行第二列'),
                                        const Text('第二行第三列'),
                                        const Text('第三行第一列'),
                                        const Text('第三行第二列'),
                                        const Text('第三行第三列'),
                                ],
                      ),
              ),

    );
  }
}


//表单组件

class LoginPageApp extends StatefulWidget
{
    @override
    _LoginPageState createState() =>_LoginPageState();
}

class _LoginPageState extends State<LoginPageApp>
{

  //全局key用来获取Form表单组件
  GlobalKey<FormState> loginKey= new GlobalKey<FormState>();
  //用户名
  String userName;
  //密码
  String password;

  void login()
  {
      //读取当前Form状态
      var  loginForm = loginKey.currentState;

      //验证form表单
      if(loginForm.validate())
      {
          loginForm.save();
          print('userName:'+userName+',password:'+password);
      }
  }

      @override
  Widget build(BuildContext context) {
    // TODO: implement build    百度  1988.73    小米 3134.22   3199   借呗 2712.35    中信 2679
        final title ='Form 表单示例';
    return new MaterialApp(
            title: title,
            home: Scaffold(
                    appBar: AppBar(
                          title: new Text(title),
                    ),
                    body: new Column(
                            children: <Widget>[
                                  new Container(
                                        padding: const EdgeInsets.all(16.0),
                                        child: new Form(
                                            key: loginKey,
                                            child: new Column(
                                                  children: <Widget>[
                                                    new TextFormField(
                                                      decoration: new InputDecoration(labelText: '请输入用户名'),
                                                      onSaved:(value)
                                                      {
                                                        userName=value;
                                                      },
                                                      onFieldSubmitted: (value){},
                                                    ),
                                                    new TextFormField(
                                                      decoration: new InputDecoration(labelText: '请输入密码'),
                                                      obscureText: true,
                                                      //验证表单方法
                                                      validator: (value)
                                                      {
                                                        return value.length<6?"密码长度不够6位":null;
                                                      },
                                                      onSaved: (value)
                                                      {
                                                        password=value;
                                                      },

                                                    ),
                                                    new SizedBox(
                                                      width: 340.0,
                                                      height: 42.0,
                                                      child: new RaisedButton(onPressed: login,child: new Text(
                                                        '登陆',
                                                        style: new TextStyle(
                                                          fontSize: 18.0,
                                                        ),
                                                      ),),
                                                    ),
                                                  ],
                                        )),
                                  )
                            ],
                    ),
            ),
    );
  }
}


//脚手架组件

class ScaffoldApp extends StatelessWidget
{
      @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
              title: '脚手架组件示例',
              home: ScaffoldDemo(),
    );
  }
}

class ScaffoldDemo extends StatelessWidget
{
      @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
              //头部元素  比如：左侧返回按钮  中间标题  右侧菜单
              appBar: AppBar(
                      title: Text('Scaffold 脚手架组件示例'),
              ),
              //视图内容部分
              body: Center(
                      child: Text('Scaffold'),

              ),
                //底部导航栏
              bottomNavigationBar: BottomAppBar(
                    child: Container(height: 50.0,),
              ),
              //添加FAB按钮
              floatingActionButton: FloatingActionButton(
                  onPressed: (){},
                  tooltip: '增加',
                  child:Icon(Icons.add) ,
              ),
              //FAB按钮居中展示
              floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}